import React from 'react';
import { Row, Col } from 'antd';
import {
  FileTextOutlined,
  ShareAltOutlined,
  CloudSyncOutlined
} from '@ant-design/icons';
import './FeaturesSection.css';

const FeaturesSection = () => {
  const features = [
    {
      icon: <FileTextOutlined style={{ fontSize: '30px', color: 'white' }} />,
      title: '创建和组织提示词',
      description: '轻松创建、编辑和组织您的AI提示词，使用文件夹和标签系统进行分类，让您的提示词库井井有条。',
      color: '#3b82f6' // blue-400
    },
    {
      icon: <ShareAltOutlined style={{ fontSize: '30px', color: 'white' }} />,
      title: '分享与社区',
      description: '一键分享您的提示词，生成分享码供他人使用。在提示词广场发现和获取优质提示词，激发创作灵感。',
      color: '#f472b6' // pink-400
    },
    {
      icon: <CloudSyncOutlined style={{ fontSize: '30px', color: 'white' }} />,
      title: '版本控制与备份',
      description: '支持提示词版本控制，记录每次修改。提供本地备份和云端同步，确保您的数据安全且随时可用。',
      color: '#a78bfa' // purple-400
    }
  ];

  return (
    <div className="features-section">
      <div className="container">
        <Row gutter={[32, 32]} justify="center">
          {features.map((feature, index) => (
            <Col
              key={index}
              xs={24}
              md={12}
              lg={8}
              className="feature-col"
            >
              <div className="feature-card">
                <div
                  className="feature-icon"
                  style={{ backgroundColor: feature.color }}
                >
                  {feature.icon}
                </div>
                {index < features.length - 1 && (
                  <div className="feature-connector"></div>
                )}
                <h3 className="feature-title">{feature.title}</h3>
                <p className="feature-description">{feature.description}</p>
              </div>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
};

export default FeaturesSection;
